<template>
  <div>
    <carouse :data="bannerDtoList"></carouse>
    <div class="job-page">
      <div class="job-page-center">
        <div
          class="job-explain"
          v-if="resumeIntegrity.resumeIntegrity < 100"
          @click="toResume"
        >请完善您的简历，发布求职意向获得高薪Offer</div>
        <div class="job-content">
          <div class="job-content-left">
            <div class="job-box job-serch-input">
              <div style="display:flex;align-items:center;">
                <el-autocomplete
                  class="theme-input search-input"
                  placeholder="职位名"
                  v-model="params.searchName"
                  :fetch-suggestions="querySearch"
                  @select="handleSelect"
                ></el-autocomplete>
                <el-button class="job-serch-input-button" @click="doSearch">搜索</el-button>
              </div>

              <el-row class="common-text">
                热门搜索：
                <span
                  class="hot-text"
                  v-for="(item, index) in hot"
                  :key="index"
                  @click="setSearchValue(item.label)"
                >{{item.label}}</span>
              </el-row>
            </div>
            <div class="job-filtrate">
              <div class="job-filtrate-top">
                <!-- 工作地点等的筛选 -->
                <job-top-city title="工作地点:" :data="city" v-model="params.workCityTypeId"></job-top-city>
                <job-top title="企业类型:" :data="companyType" type="0" v-model="params.companyTypeId"></job-top>
                <job-top
                  title="企业性质:"
                  :data="companyNature"
                  type="0"
                  v-model="params.companyNatureId"
                ></job-top>
                <job-top title="企业规模:" :data="companySize" type="0" v-model="params.companySizeId"></job-top>
                <job-top title="执业类型:" :data="practiceType" type="1" v-model="params.licenseTypeId"></job-top>
              </div>
              <div class="job-filtrate-bottom">
                <el-col :span="2" style="color:#dd3a31;cursor:pointer;" @click.native="remommend">推荐</el-col>
                <el-col
                  :span="3"
                  :class="jobFiltrateTime ? 'job-filtrate-time job-filtrate-timeed' : 'job-filtrate-time'"
                  @click.native="toggleTime"
                >
                  发布时间
                  <img height="11px" src="../../assets/img/job/bottom.png" alt>
                </el-col>
                <el-col :span="1">年薪</el-col>&nbsp;&nbsp;
                <el-col :span="3">
                  <el-input class="theme-input money-input" v-model="params.salaryYearStart">
                    <template slot="append">万</template>
                  </el-input>
                </el-col>-&nbsp;&nbsp;&nbsp;&nbsp;
                <el-col :span="8">
                  <el-input class="theme-input money-input" v-model="params.salaryYearEnd">
                    <template slot="append">万</template>
                  </el-input>
                </el-col>
              </div>
            </div>
            <job-list :jobList="jobList" @on-pitch="initdata"></job-list>
            <div style="display:flex; justify-content: center;" v-if="show">
              <el-button class="look-more" @click="doMore">查看更多</el-button>
            </div>
            <job-pagination v-if="!show" :total="total" @hasPage="getPage"></job-pagination>
          </div>
          <div class="job-content-right">
            <div class="job-box job-resume">
              <div class="job-resume-head">
                <img :src="data.resumeTalentInfo.image" width="51px" height="51px">
                <span>{{data.resumeTalentInfo.talentName ? data.resumeTalentInfo.talentName :'---'}}</span>
              </div>
              <div class="job-list-sub-text" style="padding:16px 0 0 0;">
                <span>{{data.resumeTalentInfo.workCity ? data.resumeTalentInfo.workCity :'---'}}</span>
                <span>|</span>
                <span>{{data.resumeTalentInfo.talentAge ? data.resumeTalentInfo.talentAge + '岁' :'---'}}</span>
                <span>|</span>
                <span>{{data.resumeTalentInfo.workDay ? data.resumeTalentInfo.workDay + '年' : '---'}}</span>
              </div>
              <div class="job-resume-sub">
                <span>简历完整度</span>
                <span>{{resumeIntegrity.resumeIntegrity}}%</span>
              </div>
              <el-progress :percentage="resumeIntegrity.resumeIntegrity" :show-text="false"></el-progress>
              <div class="job-resume-button">
                <el-button class="primary-button orange-button" @click="doPreview">简历预览</el-button>
              </div>
            </div>
            <div
              class="job-box job-advertising"
              v-for="(item,index) in rightDtoList"
              :key="index"
              @click="toAdvertising(item.url)"
            >
              <img :src="item.image" alt>
            </div>
          </div>
        </div>
      </div>
    </div>

    <page-footer></page-footer>
  </div>
</template>

<script>
import carouse from './carouse'
import jobList from './job-list'
import jobPagination from './job-pagination'
import jobTop from './job-top'
import jobTopCity from './job-top-city'
import pageFooter from '../../components/page-footer'
import { constants } from 'crypto'

export default {
  name: 'keep-12',
  data() {
    return {
      activeindex: 0,
      show: true,
      jobFiltrateTime: false,
      params: {
        page: 1,
        pageSize: 20,
        orderBy: 'DESC',
        searchName: '',
        workCityTypeId: '',
        companyTypeId: 0,
        companyNatureId: 0,
        companySizeId: 0,
        licenseTypeId: 0,
        releaseTimeId: 0,
        salaryYearStart: '',
        salaryYearEnd: ''
      },
      hot: [],
      data: {
        jobList: [],
        jobListStaticSearch: [],
        resumeTalentInfo: []
      },
      resumeIntegrity: {},
      jobList: [],
      city: [], //城市
      companyType: [], //企业类型
      companyNature: [], //企业性质
      companySize: [], //企业规模
      practiceType: [], //执业类型
      total: 0,
      rightDtoList: [],
      bannerDtoList: []
    }
  },
  methods: {
    initdata() {
      _g.apiPost('/login/getAllStaticRecord.do', {}).then(res => {
        this.practiceType = res.data.allLicenseList
        this.city = res.data.allCityList ? res.data.allCityList : {}
        this.hot.length = 0
        res.data['hot'].forEach(hot => {
          this.hot.push({ label: hot.content })
        })
      })
      let params = {
        currPageNo: this.params.page,
        pageSize: this.params.pageSize,
        orderBy: this.params.orderBy
      }
      this.bannerDtoList.length = 0
      this.rightDtoList.length = 0
      _g.apiPost('/talent/initJobListPage.do', params).then(res => {
        this.data = res.data
        this.jobList = res.data.jobList
        this.bannerDtoList = []
        res.data.bannerDtoList.forEach(item => {
          this.bannerDtoList.push(JSON.parse(item.content))
        })
        this.rightDtoList = []
        res.data.rightDtoList.forEach(item => {
          this.rightDtoList.push(JSON.parse(item.content))
        })

        for (let i = 0; i < this.data.jobListStaticSearch.length; i++) {
          if (this.data.jobListStaticSearch[i].id == 10) {
            this.companyType = this.data.jobListStaticSearch[i].staticRecordList
          }
          if (this.data.jobListStaticSearch[i].id == 11) {
            this.companyNature = this.data.jobListStaticSearch[
              i
            ].staticRecordList
          }
          if (this.data.jobListStaticSearch[i].id == 12) {
            this.companySize = this.data.jobListStaticSearch[i].staticRecordList
          }
        }
        localStorage.setItem(
          localSaved.jobBannerData,
          JSON.stringify(this.bannerDtoList)
        )
      })
    },
    doMore() {
      this.params.page++;
      let params = {
        currPageNo: this.params.page,
        pageSize: this.params.pageSize,
        orderBy: this.params.orderBy
      }
      _g.apiPost('/talent/initJobListPage.do', params).then(res => {
        if(res.data.jobList.length == 0){
          _g.message('没有更多了', 'warning')
        }else{
          console.log("jobList", this.jobList)
         res.data.jobList.forEach(job =>{
           this.data.jobList.push(job);
         })
          console.log("jobList", this.jobList)
        }
      })

    },
    remommend() {
      this.jobFiltrateTime = false
      this.show = true
      this.initdata()
    },
    doSearch() {
      // console.log(2)
      _g.apiPost('/talent/searchJob.do', this.params).then(res => {
        if (res.msg != '查询成功！') {
          _g.toMessage(res)
        }
        this.show = false
        this.jobList = res.data.list
        console.log('search',this.jobList)
        this.total = res.data.total
      })
    },
    doClick(index) {
      this.activeindex = index
    },
    getPage(val) {
      this.params.page = val
      this.doSearch()
    },
    doPreview() {
      let routerUrl = this.$router.resolve({
        path: '/resume/preview'
      })
      window.open(routerUrl.href, '_blank')
    },
    toggleTime() {
      this.jobFiltrateTime = true
      this.params.releaseTimeId = 1
      this.doSearch()
    },
    setSearchValue(name) {
      this.params.searchName = name
    },
    querySearch(queryString, callback) {
      //点击input框加载历史记录
      _g.apiPost('/talent/recentTopSearch.do', {}).then(res => {
        callback(res.data)
      })
    },
    handleSelect(item) {
      console.log(item)
    },
    toAdvertising(url) {
      //跳转到广告链接
      // window.location.href = url
      if (url.indexOf('//') == -1) {
        window.open('//' + url, '_blank')
      } else {
        window.open(url, '_blank')
      }
    },
    toResume() {
      this.$router.push({ path: '/resume' })
    },
  },
  mounted() {
    this.initdata();

  },
  activated() {
    _g.apiPost('/talent/initResumeIntegrity.do', {}).then(res => {
      this.resumeIntegrity = res.data.resumeIntegrity
      localStorage.setItem('resumeIntegrity',JSON.stringify(res.data.resumeIntegrity)
      )
    })
  },
  components: {
    carouse,
    jobList,
    jobPagination,
    jobTop,
    pageFooter,
    jobTopCity
  }
}
</script>

<style lang="scss" >
.orange-button {
  width: 100%;
}
.look-more {
  padding: 0;
  margin: 30px 0;
  width: 240px;
  height: 40px;
  background: none;
  border: 1px solid #f09338;
  border-radius: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #f09338;
}
.job-city-dialog {
  .el-dialog {
    margin-top: 20vh !important;
    width: 800px !important;
    height: 600px !important;
    .job-city-dialog-content {
      padding: 0 40px 10px 40px;
      height: 500px;
      overflow: auto;
    }
  }
}
.content-item {
  padding: 10px 0 20px 0;
  border-bottom: 1px solid #dcdcdc;
  .content-item-left {
    line-height: 28px;
    font-size: 16px;
  }
  .content-item-button {
    font-size: 16px;
    color: #4e6088;
    padding: 5px 15px;
    margin-left: 0;
  }
  .content-item-buttone-checked {
    background: #f09338;
    color: #fff;
    border-radius: 0;
  }
}
</style>
